/* Plot Configuration */
$(function () {
    var visitor = [];
		
		/* Your stats */
		// Add your stats here, visitor.push([month_number, visitors_number])
		// If you want to dynamically change these values, from a database for example,
		// and you don't want to use ajax to get and set the following values, you could
		// rename the whole file to .php, made it echo all javascript and then 
		// include it in your main page between <script> tags.
		// You could then change the values with php variables coming 
		// from (e.g.) database queries
		visitor.push([1, 4700]);
		visitor.push([2, 3500]);
		visitor.push([3, 5500]);
		visitor.push([4, 7200]);
		visitor.push([5, 4500]);
		visitor.push([6, 3100]);
		visitor.push([7, 5800]);
		visitor.push([8, 4900]);
		visitor.push([9, 7500]);
		visitor.push([10, 6600]);
		visitor.push([11, 7000]);
		visitor.push([12, 9100]);
		/* End OF Your stats */
		
		//////////////////////////////////////////////////////////////////////////////////
		//////////////////////////////////////////////////////////////////////////////////

    var plot = $.plot($("#placeholder"),
           [ { data: visitor, label: "Visitors" } ], {
               series: {
                   lines: { show: true },
                   points: { show: true }
               },
               grid: { hoverable: true, clickable: true },
               yaxis: { min: 500, max: 12000 },
							 legend: {
									show: false
							 },
							 xaxis: {
									mode: null,
									ticks: [[1, "Jan"], [2, "Feb"], [3, "Mar"], [4, "Apr"], [5, "May"], [6, "Jun"], [7, "Jul"], [8, "Aug"], [9, "Sep"], [10, "Oct"], [11, "Nov"], [12, "Dec"]]
							 },
							 lines: { show: true, fill: 0.5 }
             });

    function showTooltip(x, y, contents) {
        $('<div id="tooltip">' + contents + '</div>').css( {
            position: 'absolute',
            display: 'none',
            top: y - 30,
            left: x - 50,
            border: '1px solid #999',
            padding: '2px',
            'background-color': '#EEE',
            opacity: 0.80
        }).appendTo("body").fadeIn(200);
    }

    var previousPoint = null;
    $("#placeholder").bind("plothover", function (event, pos, item) {
        $("#x").text(pos.x.toFixed(2));
        $("#y").text(pos.y.toFixed(2));

				if (item) {
						if (previousPoint != item.datapoint) {
								previousPoint = item.datapoint;
								
								$("#tooltip").remove();
								var x = item.datapoint[0].toFixed(2),
										y = item.datapoint[1].toFixed(2);
								
								showTooltip(item.pageX, item.pageY,
														"&bull; " + y + " " + item.series.label + " &bull;");
						}
				}
				else {
						$("#tooltip").remove();
						previousPoint = null;            
				}
    });
});
/* END OF Plot Configuration */